<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<meta charset="utf-8" />
<title>ECharts</title>

<%@ include file="/common/pre/header.jsp"%>

<!-- 引入 echarts.js -->
<script src="<%=basePath%>js/echarts.min.js"></script>
<script src="<%=basePath%>js/ecStat.js"></script>
<script type="text/javascript" src="<%=basePath%>js/jquery-1.8.3.js"
	charset="utf-8"></script>
	<style type="">
	
	#findFaultRoom{margin-top: -25px;}
	
	</style>
	
</head>
<body>
	<c:if test="${user == null}">
		<c:redirect url="login.jsp"></c:redirect>
	</c:if>
		
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->


	<div id="main" style="width: 840px; height: 430px;"></div>


	<script type="text/javascript">
	
		var datas = [         
		             
		             
			 <c:forEach items="${countMap}" var="demp"> 
				 {value:${demp.value}, name:'${demp.key}'},
      
			</c:forEach> 
		             
           
         
        ]
		
	
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('main'));

		// 指定图表的配置项和数据

		var option = {
			    title : {
			        text: '损坏设备所占比',
			        x:'center'
			    },
			    tooltip : {
			        trigger: 'item',
			        formatter: "{a} <br/>{b} : {c} ({d}%)"
			    },
			    toolbox: {
			        feature: {
			            dataView: {show: true, readOnly: false},
			          
			            saveAsImage: {show: true}
			        }
			    },
			    legend: {
			        orient: 'vertical',
			        left: 'left',
			        data:[ 
							<c:forEach items="${faultInfo1}" var="demp"> 
					         
				        	'${demp.faultName}',
						
							</c:forEach>
						] 
			        	
			     
			    },
			    series : [
			        {
			            name: '损坏情况',
			            type: 'pie',
			            radius : '55%',
			            center: ['50%', '60%'],
			            data:datas,
			            itemStyle: {
			                emphasis: {
			                    shadowBlur: 10,
			                    shadowOffsetX: 0,
			                    shadowColor: 'rgba(0, 0, 0, 0.5)'
			                }
			            }
			        }
			    ]
			};

		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
		
		
	</script>
</body>
</html>